<template>
  <div class="main">
    <li v-for="(item,index) in chatroomList" :key="index" @click="toChat(item)">
      <div class="icon">
        <img :src="item.img" alt>
      </div>
      <div class="name">{{item.name}}</div>
    </li>
  </div>
</template>
<script>
import { send, getIMData } from "../../../im";
export default {
  name: "chat",
  data() {
    return {
      chatroomList: [
        {
          img: require("../img/Block chain knowledge.png"),
          name: "区块链知识普及",
          id: "1"
        },
        {
          img: require("../img/Octopus Club.png"),
          name: "章鱼会员俱乐部",
          id: "2"
        },
        {
          img: require("../img/New person training.png"),
          name: "新人培训室",
          id: "3"
        }
      ]
    };
  },
  methods: {
    toChat(item) {
      console.log(item);
    }
  }
};
</script>
<style lang="stylus" scoped>
.main {
  width: 100%;

  li {
    width: 6.84rem;
    margin: 10px auto;
    display: flex;
    height: 1.27rem;
    line-height: 1.27rem;
    background: #FFF;
    border-radius: 10px;

    .icon {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.5rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

